var grids=[[0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0]];

var context;

const SIDELEN=40;

const COLORS = {
        "0": "#FFFFFF",
        "1": "#000000"
}
export default {
    data: {
        currentSteps:0
    },
    onReady(){
        context=this.$refs.canvas.getContext('2d');
    },
    onShow(){
        this.drawGrids();
    },
    drawGrids(){
        for (let row = 0 ;row < 8 ;row++){
            for (let column = 0; column < 8;column++){
                let gridStr = grids[row][column].toString();

                context.fillStyle = COLORS[gridStr];
                let leftTopX = column * SIDELEN;
                let leftTopY = row * SIDELEN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);
            }
        }

    }
};
